<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{common/base :: Layout(~{::content},~{::title}, _,~{::productMenu},_,_,_,_,_,~{::scripts},_)}">

<title>功能详情列表</title>
<content>

    <div class="layui-tab-brief layui-tab">
        <ul class="layui-tab-title site-demo-title">
            <li><a href="/pages/products">设备模板列表</a></li>
            <li><a href="javascript:history.back(-1)">设备模板详情</a></li>
            <li class="layui-this"><a><cite>功能详情</cite></a></li>
        </ul>
    </div>
    <div class="layui-fluid">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header"><h1 th:text="${function.getFunctionName()}"></h1></div>
                <div class="layui-card-body">
                    <div class="layui-row">
                        <div class="layui-col-md4">
                            <b>FunctionKey:</b> <span th:text="${function.getFunctionId()}"></span>
                        </div>
                    </div>
                    <br>
                    <!--卡片风格tab选项卡-->
                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<!--                        <ul class="layui-tab-title">-->
<!--                            <li class="layui-this">产品信息</li>-->
<!--                            <li>功能定义</li>-->
<!--                        </ul>-->
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <br/>
                                <b><h2>功能信息</h2></b>
                                <br/>
                                <table border="0" class="layui-table">

                                    <tr>
                                        <th><b>设备模板名称</b></th>
                                        <td th:text="${function.getProductName()}"></td>
                                    </tr>
                                    <tr>
                                        <th><b>功能名称</b></th>
                                        <td th:text="${function.getFunctionName()}"></td>
                                    </tr>
                                    <tr>
                                        <th><b>功能类型</b></th>
                                        <td th:text="${function.getFunctionType()}"></td>
                                    </tr>
                                    <tr>
                                        <th><b>寄存器</b></th>
                                        <td th:text="${function.getHoldingRegister()}"></td>
                                    </tr>
                                    <tr>
                                        <th><b>数据类型</b></th>
                                        <td th:text="${function.getHoldingRegister()}"></td>
                                    </tr>
                                    <tr>
                                        <th><b>寄存器</b></th>
                                        <td th:text="${function.getHoldingRegister()}"></td>
                                    </tr>
                                    <tr>
                                        <th><b>读写方式</b></th>
                                        <td th:text="${function.getReadWrite()}"></td>
                                    </tr>
                                    <tr>
                                        <th><b>数据大小</b></th>
                                        <td th:text="${function.getValueSize()}"></td>
                                    </tr>
                                    <tr>
                                        <th><b>数据规模</b></th>
                                        <td th:text="${function.getValueScale()}"></td>
                                    </tr>
                                    <tr>
                                        <th><b>数据最小值</b></th>
                                        <td th:text="${function.getValueMinimum()}"></td>
                                    </tr>
                                    <tr>
                                        <th><b>数据最大值</b></th>
                                        <td th:text="${function.getValueMaximum()}"></td>
                                    </tr>
                                    <tr>
                                        <th><b>默认数据</b></th>
                                        <td th:text="${function.getDefaultValue()}"></td>
                                    </tr>
                                    <tr>
                                        <th><b>单位类型</b></th>
                                        <td th:text="${function.getUnitsType()}"></td>
                                    </tr>
                                    <tr>
                                        <th><b>默认单位</b></th>
                                        <td th:text="${function.getDefaultUnits()}"></td>
                                    </tr>
                                    <tr>
                                        <th><b>功能描述</b></th>
                                        <td colspan="5" th:text="${function.getFunctionDesc()}"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <h1></h1>
</content>

<dd class="layui-this" th:fragment="productMenu">
    <a href="/pages/products">设备模板列表</a>
</dd>
<div th:fragment="scripts">
    <!--<script th:inline="none" type="text/html" id="barDemo">
        <button class="layui-btn layui-btn-xs" lay-event="detail">查看</button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
    </script>

    <script type="text/html" id="layerRefresh">
        <div class="layui-btn-container">
            <button id="createButton"
                    class="layui-btn layui-btn-normal layui-btn-radius"
                    lay-event="createFunction">
                添加功能
            </button>
            <button id="refreshButton"
                    class="layui-btn layui-btn-checked layui-btn-radius"
                    lay-event="refresh">
                刷新
            </button>
        </div>
    </script>


    <script th:inline="none">
        layui.use('table', function () {
            var table = layui.table;

            var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
            //第一个实例
            table.render({
                elem: '#functionTable',
                url: '/api/functions/', //数据接口
                page: true,  //开启分页
                toolbar: '#layerRefresh',
                defaultToolbar:['exports', 'print'],
                //width: 1200,
                cols: [
                    [ //表头
                        // {type: 'checkbox'},
                        {field: 'functionId', title: 'FunctionKey', sort: true, align: 'center'},
                        {field: 'functionType', title: '功能类型', align: 'center'},
                        {field: 'functionName', title: '功能名称', align: 'center'},
                        {field: 'functionIdentifier', title: '标识符', sort: true, align: 'center'},
                        {
                            title: '操作', align: 'center',
                            toolbar: '#barDemo'
                        }
                    ]
                ]
            });

            // 头工具栏事件
            table.on('toolbar(buttons)', function (obj) {

                var checkStatus = table.checkStatus('test');
                switch (obj.event) {
                    case 'createFunction':
                        notice();
                        break;
                    case 'refresh':
                        table.reload("functionTable")

                        break;
                }
                ;
            });

            //监听工具条
            table.on('tool(buttons)', function (obj) {

                var data = obj.data;
                if (obj.event === 'detail') {
                    // layer.('ID：' + data.functionId + ' 的查看操作');
                    location.href = "/pages/functionDetails?functionId=" + data.functionId;
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {

                        $.ajax({
                            type: "delete",
                            url: "/api/function",
                            async: false,//同步提交。不设置则默认异步，异步的话，最后执行ajax
                            data: JSON.stringify({'functionId': data.functionId}),
                            contentType: "application/json",
                            // processData: false,
                            // cache: false,
                            success: function (ev) {
                                if (ev.data == "删除成功") {
                                    obj.del();
                                    layer.msg(ev.data);
                                    layer.close(index);
                                    table.reload("functionTable");
                                } else {
                                    layer.msg(ev.data);
                                    layer.close(index);
                                }
                            }
                        });
                    });
                }
            });

            //触发创建产品弹出层

            function notice(){
                //示范一个公告层
                layer.open({
                    type: 2
                    ,
                    title: "新建功能"
                    ,
                    closeBtn: 1
                    ,
                    area: ['600px', '600px']
                    ,
                    shade: 0.3
                    ,
                    id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,
                    btn: ['提交', '重置', '取消']
                    ,
                    btnAlign: 'c'
                    ,
                    moveType: 1 //拖拽模式，0或者1
                    ,
                    content: '/pages/functionCreate'
                    ,
                    // success: function (layero) {
                    //     var btn = layero.find('.layui-layer-btn');
                    //     btn.find('.layui-layer-btn0').attr({
                    //         href: 'http://www.layui.com/'
                    //         , target: '_blank'
                    //     });
                    // }
                    yes: function (index, layero) {

                        // 获取弹出层中的form表单元素
                        var formSubmit = layer.getChildFrame('form', index);
                        // // 获取表单中的提交按钮（在我的表单里第一个button按钮就是提交按钮，使用find方法寻找即可）
                        var submited = formSubmit.find('button')[0];
                        // // 触发点击事件，会对表单进行验证，验证成功则提交表单，失败则返回错误信息
                        submited.click();
                        // layer.close(index);
                        // 弹出层关闭的操作在子层的js代码中完成

                    },
                    btn2: function (index, layero) {
                        //按钮【重置】的回调
                        // 获取弹出层中的form表单元素
                        var formSubmit = layer.getChildFrame('form', index);
                        // // 获取表单中的提交按钮（在我的表单里第一个button按钮就是提交按钮，使用find方法寻找即可）
                        var submited = formSubmit.find('button')[1];
                        submited.click();
                        return false;
                    }
                });
            };
            function details(){
                layer.open({
                    type: 2
                    ,
                    title: "新建功能"
                    ,
                    closeBtn: 1
                    ,
                    area: ['600px', '600px']
                    ,
                    shade: 0.3
                    ,
                    id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,
                    /*btn: ['提交', '重置', '取消']
                    ,
                    btnAlign: 'c'
                    ,
                    moveType: 1 //拖拽模式，0或者1
                    ,*/
                    content: '/pages/functionDetails'
                    ,
                    // success: function (layero) {
                    //     var btn = layero.find('.layui-layer-btn');
                    //     btn.find('.layui-layer-btn0').attr({
                    //         href: 'http://www.layui.com/'
                    //         , target: '_blank'
                    //     });
                    // }
                    /*yes: function (index, layero) {

                        // 获取弹出层中的form表单元素
                        var formSubmit = layer.getChildFrame('form', index);
                        // // 获取表单中的提交按钮（在我的表单里第一个button按钮就是提交按钮，使用find方法寻找即可）
                        var submited = formSubmit.find('button')[0];
                        // // 触发点击事件，会对表单进行验证，验证成功则提交表单，失败则返回错误信息
                        submited.click();
                        // layer.close(index);
                        // 弹出层关闭的操作在子层的js代码中完成

                    },
                    btn2: function (index, layero) {
                        //按钮【重置】的回调
                        // 获取弹出层中的form表单元素
                        var formSubmit = layer.getChildFrame('form', index);
                        // // 获取表单中的提交按钮（在我的表单里第一个button按钮就是提交按钮，使用find方法寻找即可）
                        var submited = formSubmit.find('button')[1];
                        submited.click();
                        return false;
                    }*/
                });
            }
        });

    </script>-->

</div>
</html>

